<template>
  <view class="goods4-area">
    <view class="goods4-image-area">
      <view class="goods4-image-box">
        <image class="goods4-image" src="/static/goods_list/face.jpg" mode="" />
      </view>
    </view>
    <view class="goods4-title-area">
      <view class="goods4-title-icon-area">
        <image class="goods4-title-icon" src="/static/goods_list/face.jpg" mode="" />
      </view>
      <text class="goods4-title-text">草莓味-零食大礼包网红爆款休闲充饥夜宵小吃饼干组合啷里格啷格啷</text>
    </view>
    <view class="goods4-business-area">
      <gg-icons class="goods4-business-icon" type="shop" size="12" color="#999999" />
      <text>草莓味旗舰店</text>
    </view>
    <view class="goods4-label-area">
      <view class="goods4-label-z-area">
        <view class="goods4-label-z-left">
          <text>赚</text>
        </view>
        <view class="goods4-label-z-right">
          <text>2.11元</text>
        </view>
      </view>
      <view class="goods4-label-q-area">
        <view class="goods4-label-q-left">
          <text>券</text>
        </view>
        <view class="goods4-label-q-right">
          <text>99.99元</text>
        </view>
      </view>
    </view>
    <view class="goods4-sales-area"><text>月销693万</text></view>
    <view class="goods4-price-area">
      <view class="goods4-price-q-area">
        <text class="goods4-price-q-l">券后</text>
        <text class="goods4-price-q-r">38</text>
      </view>
      <view class="goods4-price-y-area">
        <text>99</text>
      </view>
      <view class="goods4-sales2-area">
        1273人付款
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
.goods4-area {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
/* 主图 */
.goods4-image-area {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.goods4-image-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.goods4-image {
  width: 100%;
  height: 100%;
}
/* 标题和标题图标 */
.goods4-title-area {
  line-height: 1.5em;
  font-size: 13px;
  margin-top: 5px;
  position: relative;
}

.goods4-title-icon-area {
  height: 18px;
  width: 18px;
  position: absolute;
}
.goods4-title-icon {
  height: 18px;
  width: 18px;
  border-radius: 3px;
}
.goods4-title-text {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-indent: 20px;
}
/* 商户 */
.goods4-business-area {
  margin-top: 5px;
  font-size: 10px;
  color: #999;
}
.goods4-business-icon {
  margin-right: 3px;
}
/* 标签 */
.goods4-label-area {
  height: 16px;
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.goods4-label-z-area,
.goods4-label-q-area {
  height: 16px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  line-height: 16px;
  margin-right: 5px;
}
.goods4-label-z-area {
  background-color: #fbe23f;
}
.goods4-label-z-left {
  color: #fbe23f;
  padding: 0 18px 0 8px;
  background: linear-gradient(-60deg, transparent 11px, #32332d 0);
}
.goods4-label-z-right {
  color: #32332d;
  padding-right: 5px;
}
.goods4-label-q-area {
  background-color: #fe4c48;
  color: #fff;
}
.goods4-label-q-left,
.goods4-label-q-right {
  padding: 0 5px;
}
.goods4-label-q-left {
  border-right-style: dashed;
}
/* 销量 */
.goods4-sales-area {
  font-size: 11px;
  color: #666666;
  margin-top: 5px;
}
/* 价格销量同行 */
.goods4-price-area {
  height: 24px;
}
.goods4-price-q-area {
  color: #fe4c48;
  margin-right: 5px;
  float: left;
  line-height: 24px;
}
.goods4-price-q-l {
  font-size: 12px;
}
.goods4-price-q-r {
  font-size: 16px;
  font-weight: bold;
}
.goods4-price-q-r::before {
  content: "￥";
  width: 12px;
  display: inline-block;
}
.goods4-price-y-area {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  text-decoration: line-through;
  float: left;
  padding-top: 3px;
}
.goods4-price-y-area::before {
  content: "￥";
  width: 11px;
  display: inline-block;
  text-decoration: line-through;
}
.goods4-sales2-area {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  align-self: flex-end;
  float: right;
  padding-top: 3px;
}
</style>
